﻿<script setup lang="ts" name="Guide">
import { storeToRefs } from 'pinia'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'

const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)

const steps = [
  {
    element: '.vk-layout-sidebar',
    popover: {
      title: '侧边栏',
      description: '项目页面导航区域，可以查找想访问的页面并打开相应页面',
      position: 'right'
    }
  },
  {
    element: '.vk-header',
    popover: {
      title: '顶栏',
      description: '用于显示项目的一些便捷操作',
      position: 'bottom'
    }
  },
  {
    element: '.vk-hamburger-container',
    popover: {
      title: '折叠展开按钮',
      description: '点击可以将侧边栏折叠展开',
      position: 'right'
    }
  },
  {
    element: '.vk-breadcrumb-container',
    popover: {
      title: '面包屑',
      description: '显示当前页面的导航路径',
      position: 'right'
    }
  },
  {
    element: '.vk-lock-screen-button',
    popover: {
      title: '锁屏',
      description: '点击可将项目锁屏',
      position: 'left'
    }
  },
  {
    element: '.vk-dropdown-badge',
    popover: {
      title: '消息通知',
      description: '可以查看系统最新消息',
      position: 'left'
    }
  },
  {
    element: '.vk-full-screen',
    popover: {
      title: '全屏',
      description: '点击可以进行全屏切换',
      position: 'left'
    }
  },
  {
    element: '.vk-globalization',
    popover: {
      title: '国际化',
      description: '点击可以进行语言切换',
      position: 'left'
    }
  },
  {
    element: '.vk-size',
    popover: {
      title: '组件尺寸',
      description: '点击可以进行页面内容大小切换',
      position: 'left'
    }
  },
  {
    element: '.vk-settings',
    popover: {
      title: '项目配置',
      description: '点击可以查看并修改项目配置',
      position: 'left'
    }
  },
  {
    element: '.vk-tag-panel',
    popover: {
      title: '标签栏',
      description: '多标签相关操作展示区域',
      position: 'bottom'
    }
  },
  {
    element: '.vk-tag-scroll__container',
    popover: {
      title: '标签页',
      description: '已打开页面的标签在这里展示',
      position: 'bottom'
    }
  },
  {
    element: '.vk-btn-refresh',
    popover: {
      title: '刷新',
      description: '点击可以刷新当前页面',
      position: 'left'
    }
  },
  {
    element: '.vk-tag-operate',
    popover: {
      title: '标签页操作',
      description: '标签页关闭相关操作',
      position: 'left'
    }
  },
  {
    element: '.vk-tag-max-size',
    popover: {
      title: '标签页最大化',
      description: '将主体内容区域最大化，这会隐藏掉侧边导航栏和顶栏',
      position: 'left'
    }
  },
  {
    element: '.vk-layout-content',
    popover: {
      title: '主体内容区域',
      description: '导航页面内容展示区域',
      position: 'mid-center'
    }
  }
]

const driver = new Driver({
  className: 'scoped-class',
  animate: true,
  opacity: 0.75,
  padding: 0,
  allowClose: true,
  overlayClickNext: false,
  doneBtnText: '我知道了',
  closeBtnText: '跳过',
  nextBtnText: '下一步',
  prevBtnText: '上一步'
})

const guide = () => {
  setTimeout(() => {
    driver.defineSteps(steps)
    driver.start()
  }, 50)
}
</script>

<template>
  <el-space :size="systemConfig.space" fill direction="vertical">
    <el-card shadow="never" class="no-border no-radius">
      <p>引导页功能主要用来给第一次访问的人熟悉操作使用，可以简单介绍一下具体区域功能</p>
      <el-button @click="guide" type="primary">打开引导页</el-button>
    </el-card>
  </el-space>
</template>

<style scoped lang="scss">
.el-space {
  width: 100%;
  padding: var(--el-space) var(--el-space) 0;
}

.no-border {
  border: none;
}

.no-radius {
  border-radius: 0;
}

.el-card {
  display: flex;

  :deep(.el-card__body) {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    p {
      text-align: center;
    }

    .el-button {
      margin-top: var(--el-space);
    }
  }
}
</style>
